<template>
  <div class="user-products">
    <a-row :gutter="[16, 16]">
      <a-col :span="24">
        <a-button type="primary" @click="showPublishModal">
          <plus-outlined/>
          发布新商品
        </a-button>
      </a-col>
    </a-row>
    <a-table :columns="columns" :data-source="products" :pagination="{ pageSize: 8 }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'imageUrl'">
          <img :src=record.imageUrl :alt="record.name" style="width: 50px; height: 50px; object-fit: cover;"/>
        </template>
        <template v-if="column.key === 'action'">
          <a-space size="small">
            <a @click="showEditModal(record)">编辑</a>
            <a @click="deleteProduct(record)">删除</a>
          </a-space>
        </template>
      </template>
    </a-table>

    <publish-product-modal v-model:visible="publishModalVisible" @success="onPublishSuccess"/>
    <edit-product-modal v-model:visible="editModalVisible" :product="currentEditProduct" @success="onEditSuccess"/>
  </div>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import PublishProductModal from './PublishProduct.vue';
import EditProductModal from '@/components/user/usercenter/EditProductModal.vue';
import { useProductStore, useUserStore } from "@/stores/index.js";
import {message} from "ant-design-vue";

const columns = [
  {
    title: '图片',
    dataIndex: 'imageUrl',
    key: 'imageUrl',
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '状态',
    dataIndex: 'descStatus',
    key: 'descStatus',
  },
  {
    title: '发布时间',
    dataIndex: 'releaseDate',
    key: 'releaseDate',
  },
  {
    title: '操作',
    key: 'action',
  },
];

const userStore = useUserStore();
const productStore = useProductStore();

const publishModalVisible = ref(false);
const editModalVisible = ref(false);
const currentEditProduct = ref(null);

const products = computed(() => productStore.products);

onMounted(async () => {
  const userId = userStore.userInfo ? userStore.userInfo.userId : null;
  if (userId) {
    const success = await productStore.fetchProducts(userId);
    if (success) {
      console.log("成功获取商品");
    } else {
      console.log("获取商品数据失败", productStore.error);
    }
  } else {
    console.log('用户ID为空');
  }
});

const showPublishModal = () => {
  publishModalVisible.value = true;
};

const onPublishSuccess = (newProduct) => {
  products.value.unshift(newProduct);
  publishModalVisible.value = false;
};

const showEditModal = (record) => {
  currentEditProduct.value = { ...record };
  editModalVisible.value = true;
};

const onEditSuccess = (updatedProduct) => {
  const index = products.value.findIndex(p => p.productId === updatedProduct.productId);
  if (index !== -1) {
    products.value[index] = updatedProduct;
  }
  editModalVisible.value = false;
};

const deleteProduct = async (record) => {
  record = JSON.parse(JSON.stringify(record));
  console.log(record);
  const success = await productStore.deleteProducts(record);
  if (success) {
    message.success("删除成功");
  } else {
    console.log("删除商品失败", productStore.error);
  }
};
</script>